import React, { useEffect, useRef } from 'react';
import { Row, Col, Card, Button, List, Typography } from 'antd';
import { VideoCameraOutlined, LineChartOutlined, ClockCircleOutlined, TrophyOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';

const { Title, Text } = Typography;

const statsCards = [
  {
    icon: <VideoCameraOutlined style={{ fontSize: 24, color: '#5B6DFF' }} />,
    title: '完成面试',
    value: '12',
    background: 'linear-gradient(135deg, #E6F7FF 0%, #BAE7FF 100%)'
  },
  {
    icon: <LineChartOutlined style={{ fontSize: 24, color: '#5B6DFF' }} />,
    title: '面试评分',
    value: '85',
    background: 'linear-gradient(135deg, #E6FFFB 0%, #B5F5EC 100%)'
  },
  {
    icon: <ClockCircleOutlined style={{ fontSize: 24, color: '#5B6DFF' }} />,
    title: '训练时长',
    value: '26.5',
    unit: '小时',
    background: 'linear-gradient(135deg, #FFF7E6 0%, #FFE7BA 100%)'
  },
  {
    icon: <TrophyOutlined style={{ fontSize: 24, color: '#5B6DFF' }} />,
    title: '能力等级',
    value: 'Level 4',
    background: 'linear-gradient(135deg, #F6E6FF 0%, #EFDBFF 100%)'
  }
];

const recentInterviews = [
  {
    title: '字节跳动 - 高级前端工程师',
    time: '2024-02-28 14:30',
    score: 89
  },
  {
    title: '阿里巴巴 - 算法工程师',
    time: '2024-02-27 16:45',
    score: 92
  },
  {
    title: '腾讯 - 后端开发工程师',
    time: '2024-02-26 10:15',
    score: 85
  }
];

export default function Dashboard() {
  const lineChartRef = useRef(null);
  const radarChartRef = useRef(null);

  // 从localStorage获取用户信息
  const user = JSON.parse(localStorage.getItem('user') || '{}');
  const userName = user.name || '用户';

  useEffect(() => {
    // 初始化折线图
    if (lineChartRef.current) {
      const lineChart = echarts.init(lineChartRef.current);
      lineChart.setOption({
        grid: { top: 40, right: 20, bottom: 40, left: 40 },
        xAxis: {
          type: 'category',
          data: ['2月26日', '2月27日', '2月28日', '2月29日', '3月1日'],
          axisLine: { lineStyle: { color: '#E5E7EB' } }
        },
        yAxis: {
          type: 'value',
          min: 60,
          max: 100,
          axisLine: { show: false },
          splitLine: { lineStyle: { color: '#E5E7EB' } }
        },
        series: [{
          data: [85, 92, 89, 88, 94],
          type: 'line',
          smooth: true,
          symbolSize: 8,
          lineStyle: { color: '#5B6DFF', width: 3 },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(91,109,255,0.2)' },
                { offset: 1, color: 'rgba(91,109,255,0)' }
              ]
            }
          }
        }]
      });
    }

    // 初始化雷达图
    if (radarChartRef.current) {
      const radarChart = echarts.init(radarChartRef.current);
      radarChart.setOption({
        radar: {
          indicator: [
            { name: '专业知识', max: 100 },
            { name: '表达能力', max: 100 },
            { name: '逻辑思维', max: 100 },
            { name: '创新能力', max: 100 },
            { name: '抗压能力', max: 100 },
            { name: '团队协作', max: 100 }
          ],
          splitArea: {
            areaStyle: {
              color: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB']
            }
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: [90, 85, 95, 80, 88, 92],
            name: '能力评估',
            areaStyle: {
              color: 'rgba(91,109,255,0.2)'
            },
            lineStyle: {
              color: '#5B6DFF'
            }
          }]
        }]
      });
    }
  }, []);

  return (
    <div>
      <Card>
        {/* 欢迎语 */}
        <div style={{ marginBottom: 24 }}>
          <Title level={4} style={{ marginBottom: 8 }}>下午好，{userName}</Title>
          <Text type="secondary">今日是您使用 AI 面试助手的第 28 天</Text>
        </div>

        {/* 数据概览卡片 */}
        <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
          {statsCards.map(card => (
            <Col xs={24} sm={12} xl={6} key={card.title}>
              <Card bodyStyle={{ padding: 24, background: card.background, borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                  <div style={{ 
                    width: 40, 
                    height: 40, 
                    borderRadius: 8, 
                    background: '#fff', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center' 
                  }}>
                    {card.icon}
                  </div>
                  <Text style={{ marginLeft: 12, fontSize: 16 }}>{card.title}</Text>
                </div>
                <Title level={3} style={{ margin: 0 }}>
                  {card.value}
                  {card.unit && <Text style={{ fontSize: 14, marginLeft: 4 }}>({card.unit})</Text>}
                </Title>
              </Card>
            </Col>
          ))}
        </Row>

        {/* 图表区域 */}
        <Row gutter={24} style={{ marginBottom: 24 }}>
          <Col xs={24} xl={14}>
            <Card title="面试分数统计" bodyStyle={{ padding: 0 }}>
              <div ref={lineChartRef} style={{ height: 300, width: '100%' }} />
            </Card>
          </Col>
          <Col xs={24} xl={10}>
            <Card title="能力评估" bodyStyle={{ padding: 0 }}>
              <div ref={radarChartRef} style={{ height: 300, width: '100%' }} />
            </Card>
          </Col>
        </Row>

        {/* 近期面试列表 */}
        <Card title="近期面试">
          <List
            dataSource={recentInterviews}
            renderItem={item => (
              <List.Item
                extra={
                  <div>
                    <Text type="secondary" style={{ marginRight: 24 }}>{item.time}</Text>
                    <Text strong style={{ color: '#5B6DFF' }}>{item.score} 分</Text>
                  </div>
                }
              >
                <List.Item.Meta
                  title={item.title}
                />
              </List.Item>
            )}
          />
        </Card>
      </Card>
    </div>
  );
} 